<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>品牌列表页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>

    <div id=app>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加</h3>
            </div>
            <div class="panel-body form-inline">
                <label>id:
                    <input type="text" class="form-control" name="" v-model='id'>
                </label>
                <label>name:
                    <input type="text" class="form-control" name="" v-model='name'>
                </label>
                <input type="button" name="" value="添加" class="btn btn-primary" @click=add>
                <label>搜索:
                    <input type="text" v-clo='"red"' v-focus class="form-control" name="" v-model='keyWords'>
                </label>
            </div>
        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>id</th>
                <th>name</th>
                <th>addtime</th>
                <th>op</th>
            </thead>
            <TBODY>
                <tr v-for='n in search(keyWords)' :key='n.id'>
                    <td>{{n.id}}</td>
                    <td>{{n.name}}</td>
                    <td>{{n.addtime}}</td>
                    <td><a href="" @click.prevent='del(n.id)'>删除</a></td>
                </tr>
            </TBODY>
        </table>
    </div>
    <script type="text/javascript">
    //定义全局指令
    Vue.directive('focus', {
        bind: function(el) {

        },
        inserted: function(el) {
            el.focus();
        },
        undated: function() {

        }

    })
    var vm = new Vue({
        el: "#app",
        data: {
            list: [
                { id: 1, name: 'tom', addtime: '2017-02-02 10:22:00' },
                { id: 2, name: 'jo', addtime: '2017-02-02 10:22:00' }

            ],
            id: '',
            name: '',
            keyWords: ''
        },
        directives:{
           clo:function(el,bd){
            el.style.color=bd.value;
           } 
        }
        ,methods: {
            add() {
                this.list.push({ id: this.id, name: this.name, addtime: new Date() })
                this.id = '';
                this.name = '';
            }

            ,
            del(id) {
                this.list.some((n, i) => {
                    if (n.id == id) {
                        this.list.splice(i, 1);
                        return true;
                    }
                })
            },
            search(keyWords) {
                /* var newList=[];
                 this.list.forEach(n=>{
                     if(n.name.indexOf(keyWords)!=-1){
                         newList.push(n)
                     }
                 })
                 return newList;*/
                return this.list.filter(n => {
                    if (n.name.includes(keyWords)) {
                        return true;
                    }
                })

            }
        }
    })
    </script>
</body>

</html>